<template>
    <span v-hotkey="keymap" v-show="show">
        Press `ctrl + esc` to toggle me! Hold `enter` to hide me!
    </span>
</template>
  
<script>
export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        toggle() {
            this.show = !this.show
        },
        show() {
            this.show = true
        },
        hide() {
            this.show = false
        }
    },
    computed: {
        keymap() {
            return {
                // 'esc+ctrl' is OK.
                'ctrl+esc': this.toggle,
                'enter': {
                    keydown: this.hide,
                    keyup: this.show
                }
            }
        }
    }
}
</script>
  